<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/moviePlayer.css">
</head>
<body>
<div id = "moviePlayer" >

    <div class="publicTop">
        <iframe src="top.html" width="100%" height="100%" frameborder="0"></iframe>
    </div>

    <div class="playerContent">
        <div class="leftContent">
            <img class="movieImg" v-bind:src="'../movieImg/'+movieVideo.movieImgPath"><br>
            <div class="movieName">{{movieVideo.movieName}}</div>
            <div class="movieName" style="font-size: 20px">{{movieVideo.translateName}}</div>
            <br>
            <div class="movieDetail">
                {{movieVideo.type}}<br>
                {{movieVideo.area}}<br>
                {{movieVideo.showTime}}
            </div>

        </div>
        <video class="player" controls  v-bind:src="'../movieVideo/'+movieVideo.videoPath" width="640" height="320" type="video/mp4">
            <p>Your browser does not support the video tag.</p>
        </video>
            <div class="rightContent">

            </div>
    </div>


</div>
<script src="../js/vue.js"></script>
<script src="../js/axios.main.js"></script>
<script>
    var urlDate = new URLSearchParams(location.search);
    var id = urlDate.get("id");
    var moviePlayer = new Vue({
        el:"#moviePlayer",
        data:{
            movieVideo: "",
        },
        methods:{
            getMovieInfo:function (){
                axios.get("http://localhost:8081/getMovieById?id="+id)
                    .then((result)=>{
                        this.movieVideo=result.data
                        console.log("moviePlayer");
                        console.log(result);
                        console.log(this.movieVideo.videoPath);
                    })
                    .catch()
            }
        },
        created(){
            this.getMovieInfo(id);
        }
    })
</script>



</body>
</html>